<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox c-box jus" v-for="(item,index) in list" :key='index'>
			<image src="/static/img/car-manage.png" mode="widthFix" class="icon-img"></image>
			<view class="columnbox c-info als">
				<view class="c-num">{{item.licensePlate}}</view>
				<view class="c-desc">品牌：{{item.brand}} {{item.model}}</view>
			</view>
			<view class="columnbox" style="align-items: flex-end;">
				<view class="rowbox n-box" v-if="item.moveCarQr==0">无挪车码</view>
				<view class="rowbox u-box" v-else>已绑定挪车码</view>
				<image @click="deletCar(item.id)" class="delet-img" src="/static/img/delet.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- <button @click="toFind">找回车辆测试</button> -->
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box">
			<view class="rowbox pay-btn" @click="addCar">添加车辆</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				total: 0,
				list: [],
				refreshflag: false
			};
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			if (this.refreshflag) {
				this.pageNum = 1
				this.list = []
				this.getList()
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.pageNum++
				this.getList()
			}
		},
		methods: {
			deletCar(id) {
				uni.showModal({
					title: '删除提醒',
					content: '确定删除您的爱车？',
					confirmText: '删除',
					success: (res) => {
						if (res.confirm) {
							this.$req.del(`/xcx/userCars/${id}`).then(res => {
								this.pageNum = 1
								this.list = []
								this.getList()
							})
						}
					}
				})
			},
			getList() {
				this.$req.get('/xcx/userCars/list', {
					pageNum: this.pageNum,
					pageSize: 20,
				}).then(res => {
					this.total = res.data.total
					this.list = this.list.concat(res.data.rows)
				})
			},
			toFind() {
				uni.showModal({
					title: '添加提醒',
					content: '车牌号已被添加，点击找回车牌',
					confirmText: '找回',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/packageA/carManage/find'
							})
						}
					}
				})
			},
			addCar() {
				uni.navigateTo({
					url: '/packageA/carManage/add'
				})
			},
			deletInfo() {
				uni.showModal({
					title: '删除提醒',
					content: '确定删除您的爱车',
					confirmText: '删除'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.c-box {
		width: 710rpx;
		border-radius: 24rpx;
		background: #fff;
		margin: 10rpx 0;
		padding: 24rpx;
		position: relative;

		.icon-img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 16rpx;
		}

		.c-info {
			width: 520rpx;

			.c-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.c-desc {
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #72778A;
			}
		}

		.n-box,
		.u-box {
			height: 34rpx;
			background: #72778A;
			border-radius: 0px 0px 8rpx 8rpx;
			position: absolute;
			top: 0;
			padding: 0 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 20rpx;
			color: #FFFFFF;
			right: 10rpx;
		}

		.u-box {
			background: #17698F;
		}

		.delet-img {
			width: 32rpx;
			height: 32rpx;
			margin-top: 40rpx;
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 24rpx;
		width: 100%;
		height: 90rpx;
	}
</style>